<script setup>

const props = defineProps(['title','data'])
const emit = defineEmits(['avg'])

import * as echarts from 'echarts';
import { onMounted, watch } from 'vue';

var myChart = null

onMounted(() =>{
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(document.getElementById('charts'));
  myChart.setOption({
      title: {
        text: props.title
      },
      tooltip: {},
      animationEasing: 'elasticOut',
      animationDuration: 1000
  })
});

watch(props.data, (newdata, olddata)=>{
  myChart.setOption({
      xAxis: {
        data: props.data.xAxis
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: props.data.yAxis
        }
      ]
    });

    var tmp = 0
    props.data.yAxis.forEach(element => {
      tmp += element
    });
    emit('avg', tmp / props.data.yAxis.length)

})

</script>

<template>

  <div id="charts" style="width: 600px;height:400px;">
  </div>
</template>

<style scoped>

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
